<template>
  <div class="creationPage">
    <div class="filterVue">
      <div style="display: flex">
        <div class="filter">
          <span style="padding-right: 10px">发布状态</span>
          <el-select v-model="params.auditStatus" placeholder="请选择">
            <el-option v-for="item in status_arr" :key="item.id" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="filter">
          <span style="padding-right: 10px">发布账号</span>
          <el-select v-model="params.userName" placeholder="请选择">
            <el-option v-for="item in users" :key="item.id" :label="item.nickname" :value="item.nickname"></el-option>
        </el-select>
        </div>
        <div class="filter">
          <div style="padding-right: 10px">内容标题</div>
          <el-input v-model="params.title" placeholder="请输入" style="margin-left: 10px; width: 190px"></el-input>
        </div>
        <div style="display: flex; align-items: center;">
          <div class="btn1" @click="search">查询</div>
          <div class="btn1" @click="clearAll">清空</div>
        </div>
      </div>
      <div class="btn10" @click="toPublish">发布内容</div>
    </div>
    <div class="tableVue">
      <div class="tableList">
        <div class="thVue">
          <div class="th" style=" padding-left: 20px;">内容标题</div>
          <div class="th">发布账号</div>
          <div class="th">搭配组合</div>
          <div class="th">商品</div>
          <div class="th">浏览-点赞-评论</div>
          <div class="th">创建人</div>
          <div class="th">内容状态</div>
          <div class="th">发布时间</div>
          <div class="th">操作</div>
        </div>
        <div class="tdVue">
          <div class="tdItem" v-for="(item, index) in list" :key="index">
            <div class="td" style="display: flex; align-items: center; padding-left: 20px;">
                <img :src="item.cover" style="width: 30px; height: 30px;">
                <span style="padding-left: 10px;">{{ item.title }}</span>
            </div>
            <div class="td">{{ item.authorName }}</div>
            <div class="td">{{ item.groupCount }}</div>
            <div class="td">{{ item.productCount }}</div>
            <div class="td">{{ item.likeNum}}-{{ item.views }}-{{ item.replyNum }}</div>
            <div class="td">{{ item.createAdminName }}</div>
            <div class="td" :style="{ color: item.auditStatus==1 ? '#00A870' : '#EB7463'}">{{ status_arr[item.auditStatus-1].label }}</div>
            <div class="td">{{ item.createTime}}</div>
            <div class="td">
              <span style="color: #389bf6; cursor: pointer; font-weight: 600; padding: 0 10px" @click="toDetail(item.id)">详情</span>
            </div>
          </div>
        </div>
        <div class="paginationVue">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="params.limit"
            @current-change="pageChange"
          ></el-pagination>
        </div>
      </div>
    </div>

    <detail :drawer="drawer" ref="child" @beforeClose="drawer=false"></detail>
  </div>
</template>
  
  <script>
import { officialList, officialUserList } from '@/api/creation';
import detail from './detail.vue';
export default {
  components: { detail },
  data() {
    return {
      status_arr: [{label: "显示", value: 1}, {label: "隐藏", value: 2}],
      params: {
        title: '',
        userName: '',
        limit: 15,
        page: 1,
        status: "",
      },
      list: [],
      total: 0,
      dialogTableVisible: false,
      user: "",
      drawer: false,
      selected: [],
      users: []
    };
  },
  created() {
    this.getList();
    this.getUsers();
  },
  methods: {
    search() {
      this.params.page = 1
      this.getList()
    },
    clearAll() {
      this.params =  {
        title: '',
        userName: '',
        limit: 15,
        page: 1,
        status: "",
      }
      this.params.page = 1
      this.getList()
    },
    getList() {
      officialList(this.params).then((res) => {
        console.log(res);
        this.list = res.list;
        this.total = res.total;
      });
    },
    getUsers() {
      officialUserList().then((res) => {
        console.log('123456', res);
        this.users = res;
      });
    },
    

    toPublish(){
      this.$router.push({name: "communityCreate"})
    },

    toDetail(id){
      this.drawer = true
      this.$refs.child.getDetail(id)
    },
    
    pageChange(e) {
      console.log(e);
      this.params.page = e;
      this.getList();
    },
    
  },
};
</script>
  
  
  <style lang="scss">
.creationPage {
  width: 100%;
  height: calc(100vh - 186px);
  background: #fff;

  .el-dialog__body {
    padding: 0;
    height: 900px;
    max-height: 900px;
    padding: 20px;
  }
  .el-dialog__body::-webkit-scrollbar {
    width: 0;
  }

  .dialogVue {
    width: 100%;
    height: 60vh;
    padding-bottom: 30px;

    .label {
      color: #999;
    }
    .inpVue {
      display: flex;
      align-items: center;
      .groupVue {
        flex: 1;
        height: 440px;
        background: #ececec;
        .img,.product {
          width: 100%;
          height: 220px;
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          padding: 20px;
          .imgVue {
            flex: 1;
            height: 120px;
            overflow-x: scroll;
            // display: flex;
            .imgs {
              width: 118px;
              height: 118px;
              margin-right: 20px;
              display: inline-block;
              white-space: nowrap;
            }
          }
          // .imgVue::-webkit-scrollbar {
          //   width: 0;
          //   height: 0;
          // }
        }
      }
      .el-input__inner {
        height: 40px !important;
      }
      .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
          
      }
      .avatar-uploader {
        position: relative;
        .fileBtn {
                    width: 118px;
                    height: 118px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    opacity: 0;
                    cursor: pointer;
                    z-index: 98;
                    border: none;
                    outline: none;
                }
      }
     
      .avatar-uploader .el-upload:hover {
        border-color: #409eff;
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 118px;
        height: 118px;
        line-height: 118px;
        text-align: center;
      }
      .avatar {
        width: 118px;
        height: 118px;
        display: block;
      }
    }

    .btnVue {
      display: flex;
      justify-content: flex-end;
      margin-top: 30px;
      .btn {
        width: 66px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        margin-left: 15px;
        cursor: pointer;
      }
      .btn:nth-child(1) {
        color: #333;
        border: 1px solid #f5f5f5;
        border-radius: 4px;
      }
      .btn:nth-child(2) {
        color: #fff;
        background: #0256ff;
        border-radius: 4px;
      }
    }
  }

  .filterVue {
    width: 100%;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    .filter {
      display: flex;
      align-items: center;
      padding-right: 30px;
    }
    .btn1 {
      width: 60px;
      height: 32px;
      border-radius: 4px;
      line-height: 32px;
      text-align: center;
      background: #2561ef;
      color: #fff;
      margin-right: 10px;
      cursor: pointer;
    }
    .btn10 {
      width: 100px;
      height: 32px;
      border-radius: 4px;
      line-height: 32px;
      text-align: center;
      background: #2561ef;
      color: #fff;
      margin-right: 10px;
      cursor: pointer;
    }
  }
  .tableVue {
    flex: 1;
    height: calc(100vh - 186px - 62px);
    .thVue {
      width: 100%;
      display: flex;
      height: 70px;
      align-items: center;
      border-bottom: 1px solid #f5f5f5;
      .th {
        flex: 1;
        color: #333333;
        font-weight: 600;
        text-align: center;
      }
      .th:nth-last-child(1) {
        width: 250px;
      }
    }
    .tdVue {
      width: 100%;
      height: calc(100vh - 186px - 62px - 70px - 60px);
      overflow-y: scroll;
      .tdItem {
        width: 100%;
        height: 80px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;
        .td {
          flex: 1;
          text-align: center;
        }
        .td:nth-last-child(1) {
          width: 250px;
        }
      }
    }
    .tdVue::-webkit-scrollbar {
      width: 0;
    }
    .paginationVue {
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>